<template>
	<view class="root-contianer" @tap="selfTap=true">

		<view class="root-element" @tap="switchVisile">
			<slot></slot>
		</view>
		<view class="box" v-if="showBox" :style="{...positionMap[position],transform:`translate(${offset[0]}px,${offset[1]}px)`}">

			<view class="menu-item" v-for="(item,index) in menus" :key="item.value" @click="itemClick(item)">
				<uni-icons fontFamily="iconfont" :size="size" :color="item.disabled?'#ccc':(color||colors[index])">{{item.icon}}</uni-icons>
				<view :class="{
					'menu-title':true,
					'is-disabled':item.disabled
				}">
					{{item.title}}
				</view>

			</view>

		</view>



	</view>
</template>

<script>
	export default {
		name: "popup-menu",
		props: {
			menus: {
				type: Array,
				default: () => [{
						icon: "\ue741",
						title: "今日晚些时候",
						value: 1
					},
					{
						icon: "\ue741",
						title: "今日晚些时候",
						value: 2
					},
					{
						icon: "\ue741",
						title: "今日晚些时候",
						value: 3
					},
				],
			},
			offset: {
				type: Array,
				default: () => [-10, 10]
			},
			size: {
				type: Number,
				default: 20
			},
			color: {
				type: String,
				default: "#626262"
			},
			colors: {
				type: Array,
				default: () => []
			},
			tapRefers: {
				type: Object,
				default: () => ({})
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				randomId: Date.now() + Math.floor(Math.random() * 100000),
				showBox: false,
				screenWidth: 0,
				screenHeight: 0,
				rect: "",
				position: 'bottom-end',
				selfTap: false,
				positionMap: {
					"bottom-end": {
						right: 0,
						top: "100%"
					},
					"bottom-start": {
						left: 0,
						top: "100%"
					},
					"top-end": {
						bottom: "100%",
						right: 0
					},
					"top-start": {
						bottom: "100%",
						left: 0
					}
				},

			};
		},
		methods: {
			switchVisile(e) {
				if (this.disabled) return
				// 使用wx.createSelectorQuery选择节点	
				const query = uni.createSelectorQuery().in(this);
				query.select('.root-element').boundingClientRect((rect) => {
					const { width, height, left, top } = rect
					const centerX = left + width / 2
					const centerY = top + height / 2
					if (centerX > this.screenWidth / 2) {
						this.position = centerY > this.screenHeight / 2 ? 'top-end' : 'bottom-end'

					} else {
						this.position = centerY > this.screenHeight / 2 ? 'top-start' : 'bottom-start'
					}
				}).exec()

				this.showBox = !this.showBox
			},
			itemClick(option) {
				this.showBox = false
				this.$emit("select", option)
			},
			judgueOutside() {
				if (!this.selfTap) {
					this.showBox = false
				}
				this.selfTap = false
			}
		},
		created() {
			const res = uni.getSystemInfoSync();
			this.screenHeight = res.screenHeight
			this.screenWidth = res.screenWidth
			this.tapRefers[this.randomId] = this.judgueOutside
		},

		unmounted() {
			delete this.tapRefers[this.randomId]
		}

	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";

	.root-contianer {
		position: relative;

		.box {
			position: absolute;
			background-color: #fafafa;
			z-index: 10;
			width: max-content;
			padding: 8px 18px;
			border-radius: 4px;
			box-shadow:
				0 2px 4px rgba(0, 0, 0, 0.1),
				0 4px 8px rgba(0, 0, 0, 0.15),
				0 8px 16px rgba(0, 0, 0, 0.2);

			.menu-item {
				display: flex;
				align-items: center;

				.menu-title {
					width: max-content;
					margin-left: 12px;
					padding: 12px;
					padding-left: 0;
					color: #333;

					&.is-disabled {
						color: #ccc
					}
				}
			}
		}
	}
</style>